<template>
  <div class="ZYF-station">
    <div class="col16-class">
      <div class="map-boxclass">
        <el-amap class="amapContainer" :amap-manager="amapManager" :events="events" :center="center" :zoom="zoom" :vid="'amap-vue'">
          <div class="col6-class">
            <div class="list-title">{{title}}
              <a-icon type="rollback" class="list-title__icon" @click="goBackFn" v-show="!isShow" />
            </div>
            <a-form-model style="padding: 0 14px" :model="queryForm" :label-col="labelCol" :wrapper-col="wrapperCol" :colon="false" v-show="isShow">
              <a-form-model-item label="站点名称">
                <a-input v-model="queryForm.monitorName" placeholder="请输入站点名称" allow-clear />
              </a-form-model-item>
              <a-form-model-item label="企业名称">
                <a-input v-model="queryForm.companyName" placeholder="请输入企业名称" allow-clear />
              </a-form-model-item>
              <a-form-model-item label="地图绘制">
                <a-button class="icon-btnclass" @click="dowrGraphics('circle')" title="点击绘制圆">
                  <img src="@/assets/public/地图绘制1.png" />
                </a-button>
                <a-button class="icon-btnclass" @click="dowrGraphics('polygon')" title="点击绘制多边形">
                  <img src="@/assets/public/地图绘制3.png" alt />
                </a-button>
                <a-button class="icon-btnclass" @click="()=>{mouseTool.close(true);queryForm.geom=''}">
                  <img src="@/assets/public/地图绘制4.png" alt />
                </a-button>
              </a-form-model-item>
              <div class="form-item">
                <a-button type="primary sousuo" @click="onSubmit">搜索</a-button>
                <a-button type="reset" @click="cleanup">清空条件</a-button>
              </div>
            </a-form-model>
            <div class="list-box__shui" v-show="!isShow">
              <div class="list-total" style="background: #deefff;display: flex">
                <span>查询结果</span>
                <span>共{{total}}条记录</span>
              </div>
              <ul class="listB">
                <li class="list-child" v-for="(v,i) in dataList" :key="i" @click="selectFn(v)">
                  <div class="text-box__p">
                    <div class="xuhao">0{{i+1}}</div>
                    <p class="name-p hidden1">{{v.monitorName}}</p>
                    <a-icon type="environment" style="color: #258cd7;font-size: 20px"/>
                  </div>
                  <ul class="numnew">
                    <li class="numnew-child">
                      <div style="width:100px">企业名称:</div>
                      <div class="hidden1" style="flex: 1;color: #258cd7">{{v.companyName}}</div>
                    </li>
                    <li class="numnew-child">
                      <div style="width:100px">设备标识(MN):</div>
                      <div class="hidden1" style="flex: 1;color: #258cd7">{{v.mn}}</div>
                    </li>
                    <li class="numnew-child">
                      <div style="width:100px">监测时间:</div>
                      <div class="hidden1" style="flex: 1;color: #258cd7">{{v.monitorFactorsPos.length>0?v.monitorFactorsPos[0].datetime:"暂无数据"}}</div>
                    </li>
                  </ul>
                </li>
              </ul>
              <!-- 1303533218161532929-->
              <div class="content-bottom clearfix">
                <div class="page-box">
                  <a-pagination v-model="queryForm.current" :total="total" :defaultPageSize="queryForm.size" show-less-items @change="pagechangeFn" />
                </div>
              </div>
            </div>
          </div>
        </el-amap>
      </div>
    </div>


      <!--      地图弹窗-->
      <div class="widow-box" ref="infoWindow" v-show="isinfoWindow">
        <h3 class="h3">设备详细信息
          <a-icon class="guanbiicon" type="close-circle" @click="closeInfoWindow" />
        </h3>
        <ul class="scoll-map">
          <li class="single">
            <p class="single-title">站点名称:</p>
            <p class="single-cent">{{details.monitorName}}</p>
          </li>
          <li class="single">
            <p class="single-title">设备标识(MN):</p>
            <p class="single-cent">{{details.mn}}</p>
          </li>
          <li class="single">
            <p class="single-title">企业名称:</p>
            <p class="single-cent">{{details.companyName}}</p>
          </li>
          <li class="single">
            <p class="single-title">创建时间:</p>
            <p class="single-cent">{{details.createTime}}</p>
          </li>
          <li class="single" v-for="(v,i) in details.monitorFactorsPos" :key="i">
            <p class="single-title">{{v.monitorFactorsName}}:</p>
            <p class="single-cent">{{v.realValue}}({{v.unit?v.unit:"-"}}){{v.datetime}}</p>
          </li>
        </ul>
      </div>


    </div>
</template>

<script>
import moment from "moment";
import "moment/locale/zh-cn";
import { AMapManager, lazyAMapApiLoaderInstance } from "vue-amap";
let amapManager = new AMapManager(); // 新建生成地图画布
export default {
  name: "SiteQuery.vue",
  props:{
    title:{type:String,request:true},
    monitorType:{type:[String,Number],request: true}
  },
  data() {
    let thet = this;
    return {
      moment,
      isinfoWindow: false, //  是否显示窗口
      total: 0, // 设备总条数
      isSelect: "", // 是否选中
      isShow: true, // 是否显示列表
      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
      queryForm: {
        name: "", // 设备名称
        companyName:"",  // 企业名称
        monitorName:"",  // 站点名称
        equipmentType: "1", // 设备类型
        status: "", // 设备状态
        monitorAreaId: "", // 建测地区
        monitorFactoryId: "", // 建测工厂
        geom: "", // 坐标
        current: 1,
        size: 5,
        monitorType:""
      },
      amapManager,
      zoom: 10,
      map: "",
      center: [118.4643, 32.0238],
      events: {
        init(o) {
          lazyAMapApiLoaderInstance.load().then(() => {
            thet.initPage();
          });
        },
      },
      mouseTool: "", // 鼠标画图实例
      dataList: [], // 查询出来的数组
      markerArr: [], // 点标记数组
      clickedMarker: "", // 已选中的点标记
      details: {}, //  选中的数据对象
    };
  },
  methods: {
    // 清空条件
    cleanup(){
      this.queryForm = {
        name: "", // 设备名称
        companyName:"",  // 企业名称
        monitorName:"",  // 站点名称
        equipmentType: "1", // 设备类型
        status: "", // 设备状态
        monitorAreaId: "", // 建测地区
        monitorFactoryId: "", // 建测工厂
        geom: "", // 坐标
        current: 1,
        size: 6,
        monitorType:this.monitorType,
      };
      this.mouseTool.close(true);
    },
    // 初始化地图
    initPage() {
      this.map = this.amapManager.getMap();
      this.map.plugin(["AMap.MouseTool"], () => {
        this.mouseTool = new AMap.MouseTool(this.map);
      });
      this.mouseTool.on("draw", (data) => {
        let coordinate = data.obj.getPath();
        let str = "MULTIPOLYGON(((";
        coordinate.forEach((v) => {
          str += v.R + " " + v.Q + ",";
        });
        str += coordinate[0].R + " " + coordinate[0].Q + ")))";
        this.queryForm.geom = str;
        this.mouseTool.close();
        // MULTIPOLYGON(((120.074503 30.378658,119.989702 30.378658,119.989702 30.319403,120.074503 30.319403,120.074503 30.378658)))
      });
    },
    // 点击按钮绘制多边形
    dowrGraphics(type) {
      if (this.queryForm.geom) {
        this.$message.info("已有选取区域！");
        return;
      }
      if (type == "polygon") {
        this.mouseTool.polygon();
      } else {
        this.mouseTool.circle();
      }
    },
    // 返回按钮
    goBackFn() {
      this.isShow = true;
      this.map.remove(this.markerArr);
      this.markerArr = [];
      this.dataList = [];
      this.queryForm.current = 1;
      this.isSelect = "";
      this.closeInfoWindow();
    },
    // 点击设备方法
    selectFn(data) {
      this.isSelect = data.id;
      this.markerArr.forEach((v) => {
        if(v.x==""||v.y==""){
          return;
        }
        if (v.getExtData().id == this.isSelect) {
          if (this.clickedMarker) {
            v.setzIndex(100);
            this.clickedMarker.setzIndex(10);
            this.clickedMarker.setIcon(
                new AMap.Icon({
                  image: require("@/assets/public/空气站图标4.png"),
                  size: new AMap.Size(28, 36), //图标大小
                  imageSize: new AMap.Size(28, 36),
                })
            );
            this.clickedMarker.setOffset(new AMap.Pixel(-20, -25))
          }
          v.setIcon(
              new AMap.Icon({
                size: new AMap.Size(50, 60),
                image: require("@/assets/public/空气站图标3.png"),
                imageSize: new AMap.Size(50, 60),
                // imageOffset: new AMap.Pixel(-10, -10),
                zIndex:5
              })
          );
          v.setOffset(new AMap.Pixel(-40, -45));
          this.map.setCenter(v.getPosition());
          this.clickedMarker = v;
          this.openinfoWindow(data);
          this.details = data;
        }

      });

    },
    // 搜索按钮获取数据
    onSubmit() {
      this.queryForm.monitorType = this.monitorType;
      this.$api.postEquipmentFindByGeom(this.queryForm).then((res) => {
        if (res.data.code == 0) {
          if(res.data.data.length <= 0){
            this.$message.info("暂无数据！");
            return;
          }
          this.dataList = res.data.data;
          this.dataList.forEach((v) => {
            v.createTime = v.creatTime?moment(parseInt(v.creatTime)).format("YYYY/MM/DD HH:mm:ss"):"暂无数据";
            if (v.monitorFactorsPos&&v.monitorFactorsPos.length>0) {
              v.monitorFactorsPos.forEach(item=>{
                item.datetime = item.datetime?moment(parseInt(item.datetime)).format("YYYY/MM/DD HH:mm:ss") : "暂无数据"
              })
            }else {
              v.monitorFactorsPos = [];
            }
          });
          console.log(this.dataList)
          this.total = res.data.total;
          this.markerList();
          this.isShow = false;
        } else {
          this.$message.warning(res.data.errorMessage);
          return;
        }
      });
    },
    // 分页方法
    pagechangeFn(page) {
      this.closeInfoWindow();
      this.map.remove(this.markerArr);
      this.markerArr = [];
      this.queryForm.current = page;
      this.onSubmit();
    },
    // 初始化地图点标记
    markerList() {
      this.map.remove(this.markerArr);
      this.dataList.forEach((v) => {
        if(v.x == ""||v.y==""){
          return
        }
        v.x = v.x.replace(/\"/g,'');
        v.y = v.y.replace(/\"/g,'');
        let icon = new AMap.Icon({
          size: new AMap.Size(28, 36),
          image: require("@/assets/public/空气站图标4.png"),
          imageSize: new AMap.Size(28, 36),
          imageOffset: new AMap.Pixel(0, 0),
        });

        let marker = new AMap.Marker({
          position: new AMap.LngLat(v.x, v.y),
          offset:new AMap.Pixel(-20, -25),
          icon: icon,
          title: v.title,
        });
        marker.setExtData({ id: v.id });
        AMap.event.addListener(marker, "click", (e) => {
          this.selectFn(v);
          this.openinfoWindow(v);
          this.clickedMarker = e.target;
        });
        this.markerArr.push(marker);
      });
      this.map.add(this.markerArr);
      this.map.setFitView();
    },
    // 创建标签方法
    createInfoWindow() {
      this.isinfoWindow = true;
      return this.$refs.infoWindow;
    },
    // 打开标签方法
    openinfoWindow(data) {
      var position = new AMap.LngLat(data.x, data.y);
      this.map.panTo(position);
      this.infoWindow.setContent(this.createInfoWindow());
      this.infoWindow.open(this.map, position);
    },
    // 关闭窗口方法
    closeInfoWindow() {
      this.map.clearInfoWindow();
    },
  },

  mounted() {
    this.infoWindow = new AMap.InfoWindow({
      isCustom: true,
      anchor: "middle-left",
      offset: new AMap.Pixel(40, -10),
    });
    document.querySelector(".box-content").classList.add("none-background");
  },
  beforeDestroy() {
    document.querySelector(".box-content").classList.remove("none-background");
  },

};
</script>

<style scoped lang="scss">
// 信息窗体样式
.widow-box {
  width: 350px;
  height: auto;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 10px;
  background: #fff;
  position: relative;
  .guanbiicon {
    color: #258cd7;
    font-size: 24px;
    float: right;
  }
  .scoll-map{
    max-height: 50vh;
    overflow-y: auto;
    .single {
      width: 100%;
      height: auto;
      display: flex;
      .single-title {
        width: 35%;
        // text-align: right;
      }
      .single-cent {
        width: 65%;
        color: #258cd7;
      }
    }
  }

}
// 信息窗体样式完
.ZYF-station {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;


  .col16-class {
    width: 100%;
    height: 100%;
    position: relative;
    .col6-class {
      width: 26%;
      height: 88%;
      background: #fff;
      border-radius: 10px;
      position: absolute;
      top: 20px;
      left: 20px;
      .list-title{
        padding: 0 18px;
        line-height: 40px;
        font-size: 16px;
        font-weight: 700;
        color: #000;
        .list-title__icon{
          color: #347bbc;
          float: right;
          line-height: 40px;
        }
      }

      .icon-btnclass {
        //background-color: #2b4341;
        //border-color: #2b4341;
        padding: 0 10px;
        margin-right: 10px;
        img {
          width: 16px;
        }
      }
      .form-item {
        position: absolute;
        bottom: 5%;
      }
    }
  }

  .sousuo {
    letter-spacing: 7px;
    margin-right: 10px;
  }

  /* 搜索列表 */
  .list-box__shui {
    width: 100%;
    height: calc(100% - 80px);
    .list-total{
      color: #000;
      font-size: 14px;
      height: 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 18px;
      box-sizing: border-box;

    }
    .listB {
      width: 100%;
      height: 94%;
      padding: 0 14px;
      box-sizing: border-box;
      .list-child {
        width: 100%;
        padding: 14px 0;
        box-sizing: border-box;
        cursor: pointer;
        border-bottom: 1px solid #e3e3e3;
        .text-box__p {
          display: flex;
          align-items: center;
          .xuhao{
            font-size: 14px;
            width: 20px;
            height: 20px;
            border-radius: 20px;
            background: #258cd7;
            color: #fff;
            text-align: center;
            line-height: 20px;
            margin-right: 10px;
          }
          .name-p {
            flex: 1;
            color: #000;
            font-size: 16px;
            font-weight: 700;
          }
        }
        .numnew {
          margin-left: 30px;
          font-size: 14px;
          line-height: 1.8;
          .numnew-child{
            display: flex;
          }
        }
      }
    }
    /* 分页 */
    .content-bottom {
      padding: 0 14px;
      box-sizing: border-box;
      .page-box{
        float: right;
      }
    }
  }


  /* 右侧地图样式 */
  .map-boxclass {
    width: 100%;
    height: 100%;
  }
  /* 选中样式 */
  .select-box {
    background: linear-gradient(#1e7151, #246369);
  }
  .select-box__p {
    color: #b5c739;
  }
  .select-numnew {
    color: #10c589;
  }
}
::v-deep .ant-form-item {
  margin-bottom: 12px;
}

::v-deep.ZYF-station .amap-logo {
  opacity: 0;
}


</style>
